<template>
    <div class="i-have-examine">
        <examineModel v-on="$listeners" :examineType="type" />
    </div>
</template>

<script type="text/javascript">
    import examineModel from './examine-model.vue' 
    export default {
        inheritAttrs: false,
        data(){
            return {
                type: 1,   // 1：待我审批的；2：我已审批的；3：我发起的；4：抄送给我的；
            }
        },
        components:{
            examineModel
        },
        created(){

        },
        methods:{
           
        }
    }
</script>

<style type="text/css" lang="scss">
     #examine{

    }
</style>

<!-- <template>
    <div class="examine-by-me">
        <ul>
            <li class="pointer" @click="scanDetail(item.id,item)" v-for="(item,key) in list" :key="key">
                <div class="title clear">
                    <img class="fl avatar" :src="BASE_URL + item.avatar_path" alt="申请人头像">
                    <img v-if="item.approval_status == 0" class="fr awaitIcon" src="../../../assets/images/examine/shenhezhong.png" alt="审核用的图标">
                    <img v-if="item.approval_status == 1" class="fr awaitIcon" src="../../../assets/images/examine/pass.png" alt="通过图标">
                    <img v-if="item.approval_status == 2" class="fr awaitIcon" src="../../../assets/images/examine/reject.png" alt="拒绝图标">
                    <img v-if="item.approval_status == 3" class="fr awaitIcon" src="../../../assets/images/examine/cancel.png" alt="已撤销图标">
                    <p>{{item.title}}申请</p>
                </div>
                <ul>
                    <li v-for="inputItem in topThreeInput(item.form_data)">
                        <span>{{inputItem.title}}： </span>
                        <span>{{inputItem.content}}</span>
                    </li>
                </ul>
                <div class="time clear">
                    <p class="fl">发起时间： {{item.create_time.slice(0,10).replace(/-/g, ' . ')}}</p>
                    <p class="fl">完成时间： {{item.finish_time == '-'? item.finish_time : item.finish_time.slice(0,10).replace(/-/g, ' . ')}}</p>
                </div>
            </li>
        </ul>

        分页器
        <el-pagination
            layout="prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :current-page="params.page_index"
            :page-size="6"
            :total="data.data_sum">
        </el-pagination>

        详情弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="closeDetailView"
            :title="examineDetail.create_name + ' 提交的 ' + examineDetail.examine_name"
            :visible.sync="detailView"
            top="45px"
            width="800px">
            <div class="examineDetil">
                <div class="title clear">
                    <img v-if="examineDetail.avatar_path" class="fl avatar" :src="BASE_URL + examineDetail.avatar_path" alt="申请人头像">
                    <div class="fl">
                        <p>{{examineDetail.username}}</p>
                        <p>{{examineDetail.examine_status_text}} <span>审批中</span></p>
                    </div>
                    <div class="fr">
                        <img class="fr pdfFile pointer" @click="printPDF" src="../../../assets/images/examine/pdf.png" title="打印PDF" alt="打印PDF">
                        <img class="fr refresh pointer" @click="turnDetail" src="../../../assets/images/examine/refresh.png" title="重新提交" alt="重新提交">
                    </div>
                    <img v-if="examineDetail.approval_status == 1" class="statusIcon" src="../../../assets/images/examine/pass.png" alt="通过图标">
                    <img v-if="examineDetail.approval_status == 2" class="statusIcon" src="../../../assets/images/examine/reject.png" alt="拒绝图标">
                    <img v-if="examineDetail.approval_status == 3" class="statusIcon" src="../../../assets/images/examine/cancel.png" alt="已撤销图标">
                </div>

                审批申请单详情
                <div class="contentDetail">
                    <ul>
                        <li class="clear">
                            <span class="fl">编号：</span>
                            <span class="fl">{{examineDetail.identifier}}</span>
                        </li>
                        <li class="clear" v-for="(detailItem, detailKey) in examineDetail.form_data" :key="detailKey">
                            单行、多行、数字、金额、计算公式输入框
                            <template v-if="detailItem.id == 1 || detailItem.id == 2 || detailItem.id == 3 || detailItem.id == 11 || detailItem.id == 14">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">{{detailItem.content}}</span>
                            </template>

                            单选、多选框
                            <template v-if="detailItem.id == 4 || detailItem.id == 5">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">
                                    <template v-for="checkItem in detailItem.option">
                                        <span v-if="detailItem.content.includes(checkItem.key)">
                                            {{checkItem.value}}
                                            <span v-if="!detailItem.content.indexOf(checkItem.key) < detailItem.content.length-1">，</span></span>
                                    </template>
                                </span>
                            </template>

                            日期、日期区间
                            <template v-if="detailItem.id == 6 || detailItem.id == 7">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">{{date(detailItem.dateType, detailItem.content)}}</span>
                            </template>

                            上传图片
                            <template v-if="detailItem.id == 8">
                                <span class="fl">{{detailItem.title}}：</span>
                                <ul class="fl">
                                    <li v-for="imgURL in detailItem.content" class="fl" :key="imgURL">
                                        <img :src="BASE_URL + imgURL">
                                        <div class="cover">
                                            <i class="el-icon-zoom-in pointer" @click="previewImg(BASE_URL + imgURL)"></i>
                                        </div>
                                    </li>
                                </ul>
                            </template>

                            明细
                            <template v-if="detailItem.id == 9">
                                <div class="detail">
                                    <i class="topLine"></i>

                                    <span class="detailTitle">{{detailItem.title}}</span>

                                    明细列表
                                    <ul>
                                        <li class="clear" v-for="(mingxiItem,mingxiKey) in detailItem.detail" :key="mingxiKey">
                                            单行、多行、数字、金额、计算公式输入框
                                            <template v-if="mingxiItem.id == 1 || mingxiItem.id == 2 || mingxiItem.id == 3 || mingxiItem.id == 11 || mingxiItem.id == 14">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">{{mingxiItem.content}}</span>
                                            </template>

                                            单选、多选框
                                            <template v-if="mingxiItem.id == 4 || mingxiItem.id == 5">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">
                                                    <template v-for="checkItem in mingxiItem.option">
                                                        <span v-if="mingxiItem.content.includes(checkItem.key)">
                                                            {{checkItem.value}}
                                                            <span v-if="!mingxiItem.content.indexOf(checkItem.key) < mingxiItem.content.length-1">，</span></span>
                                                    </template>
                                                </span>
                                            </template>

                                            日期、日期区间
                                            <template v-if="mingxiItem.id == 6 || mingxiItem.id == 7">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">{{date(mingxiItem.dateType, mingxiItem.content)}}</span>
                                            </template>

                                            上传图片
                                            <template v-if="mingxiItem.id == 8">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <ul class="fl">
                                                    <li v-for="imgURL in mingxiItem.content" class="fl" :key="imgURL">
                                                        <img :src="BASE_URL + imgURL">
                                                        <div class="cover">
                                                            <i class="el-icon-zoom-in pointer" @click="previewImg(BASE_URL + imgURL)"></i>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </template>

                                            说明文字
                                            <template v-if="mingxiItem.id == 10">
                                                <a class="fl url" :href="mingxiItem.content" :target="mingxiItem.newWindow? '_blank' : '_slef'">{{mingxiItem.title}}</a>
                                            </template>
                                            
                                            附件
                                            <template v-if="mingxiItem.id == 12">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl"><a class="fl download" title="下载附件" href="">{{mingxiItem.content | filterName}}</a></span>
                                            </template>

                                            联系人
                                            <template v-if="mingxiItem.id == 13">
                                                <span class="fl">{{mingxiItem.title}}：</span>
                                                <span class="fl">
                                                    <span v-for="(linkMan, linkKey) in mingxiItem.content">{{linkMan.name}} <span v-if="linkKey != mingxiItem.content.length - 1">，</span></span>
                                                </span>
                                            </template>

                                        </li>
                                    </ul>

                                    <i class="bottomLine"></i>
                                </div>
                            </template>

                            说明文字
                            <template v-if="detailItem.id == 10">
                                <a class="fl url" :href="detailItem.content" :target="detailItem.newWindow? '_blank' : '_slef'">{{detailItem.title}}</a>
                            </template>
                            
                            附件
                            <template v-if="detailItem.id == 12">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl"><a class="fl download" title="下载附件" href="">{{detailItem.content | filterName}}</a></span>
                            </template>

                            联系人
                            <template v-if="detailItem.id == 13">
                                <span class="fl">{{detailItem.title}}：</span>
                                <span class="fl">
                                    <span v-for="(linkMan, linkKey) in detailItem.content">{{linkMan.name}} <span v-if="linkKey != detailItem.content.length - 1">，</span></span>
                                </span>
                            </template>

                        </li>
                    </ul>
                </div>

                审批流程
                <div class="flow">
                    <ul>
                        <li class="clear" v-for="(flowItem,flowKey) in examineDetail.approver" :key="flowKey">
                            <div class="fl left">
                                <img :src="BASE_URL + flowItem.avatar_path" alt="头像">
                                <i></i>
                            </div>

                            <div class="content">
                                <span class="fl name">{{flowItem.approver_name}}</span>
                                <span
                                    :class="{fl: true,
                                        sponsor: flowItem.approver_status == 1,
                                        underway: flowItem.approver_status == 2,
                                        resolve: flowItem.approver_status == 3,
                                        reject: flowItem.approver_status == 4,
                                        revocation: flowItem.approver_status == 5
                                    }">
                                    {{flowItem.approver_status_text}}
                                </span>
                                <span v-if="flowItem.deliver_history && flowItem.deliver_history.length > 0" class="history pointer" @click="showDeliverHistory(flowItem.deliver_history)">转交历史</span>
                                <span v-if="flowItem.time != '0000-00-00 00:00:00'" class="time">{{flowItem.time}}</span>
                                <p v-if="flowItem.comment" :title="flowItem.comment">{{flowItem.comment}}</p>
                            </div>
                        </li>
                        <li class="clear">
                            <div class="fl left">
                                <img src="../../../assets/images/image02.png" alt="头像">
                                <i></i>
                            </div>
                            <div class="content">
                                <span class="fl name">李春玲</span>
                                <span class="fl underway">审批中</span>
                                <span class="history pointer" @click="deliverHistoryView=true">转交历史</span>
                                <span class="time">2019-04-01 10:16:23</span>
                                <p title="这是评语这是评语只展示一行超出显示....，鼠标移入显示完整">这是评语这是评语只展示一行超出显示....，鼠标移入显示完整</p>
                            </div>
                        </li>
                    </ul>
                </div>

                通知抄送人
                <div class="copyTo">
                    <dl class="clear">
                        <dt>审批通过后，通知抄送人 </dt>
                        <dd class="fl" v-for="(copierItem, copierKey) in examineDetail.copier" :key="copierKey">
                            <img :src="BASE_URL + copierItem.avatar_path" alt="抄送人头像">
                            <p>{{copierItem.approver_name}}</p>
                        </dd>
                        <dd v-if="examineDetail.copier && examineDetail.copier.length == 0" class="fl noPeople">无抄送人</dd>
                    </dl>
                </div>

                操作栏
                <div class="clear control">
                    <div class="clear btn">
                        <button @click="commentView=true,commentContent=''" class="comment fl">
                            <img src="../../../assets/images/examine/comment.png" alt="评论图标">
                            <span>评论</span>
                        </button>
                        <button @click="transpond" class="transpond fl">
                            <img src="../../../assets/images/examine/transpond.png" alt="转交图标">
                            <span>转交</span>
                        </button>
                        <div class="clear">
                            <el-button @click="refuse" type="danger">拒绝</el-button>
                            <el-button @click="consent" type="primary">同意</el-button>
                        </div>
                    </div>
                </div>

                <div class="clear control">
                    <div class="clear center">
                        <button @click="commentView=true,commentContent=''" class="comment fl">
                            <img src="../../../assets/images/examine/comment.png" alt="评论图标">
                            <span>评论</span>
                        </button>
                    </div>
                </div>

            </div>
        </el-dialog>


        预览图片
        <el-dialog
            title="预览图片"
            :visible.sync="imgVisible"
            top="8vh"
            width="82vw">
            <div class="previewImage">
                <img :src="previewImgURL" alt="预览图片">
            </div>
        </el-dialog>

        评论弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'评论'"
            :visible.sync="commentView"
            width="550px">
            <div class="inputComment">
                <el-input
                    type="textarea"
                    placeholder="输入评语"
                    maxlength="100"
                    show-word-limit
                    v-model.trim="commentContent">
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="commentView=false" type="primary" plain>取消</el-button>
                <el-button @click="publishComment" type="primary">确认</el-button>
            </div>
        </el-dialog>
    
        转交弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'评论'"
            :visible.sync="deliverView"
            width="550px">
            <div class="deliver">
                <div class="clear">
                    <span class="fl"><i style="color:red;font-style:normal">*&nbsp;</i>选择转交人</span>
                    <span class="fl" v-if="member.length!=0">{{member[0].name}}</span>
                    <button class="fl" @click="chooseRoleView=true">选择</button>
                </div>

                <div class="clear">
                    <span class="fl">转交理由</span>
                    <el-input
                        type="textarea"
                        placeholder="输入转交理由（非必填）"
                        maxlength="100"
                        show-word-limit
                        style="width: 373px"
                        v-model.trim="deliverReason">
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelDeliver" type="primary" plain>取消</el-button>
                <el-button @click="sureDeliver" type="primary">确认</el-button>
            </div>
        </el-dialog>

        选择角色弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'选择'"
            class="copy"
            :visible.sync="chooseRoleView"
            width="800px">
            <div class="addMember clear">
                <div class="fl">
                     <el-select v-model="roleType" @change="updateUserList" placeholder="请选择">
                        <el-option
                            v-for="(item,key) in roleList"
                            :key="key"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>   
                </div>

                <div class="fl" @click="searchUser2(keyword,$event)">
                    <el-input
                        @keyup.enter.native="searchUser(keyword,$event)"
                        placeholder="用户账号、姓名"
                        suffix-icon="el-icon-search"
                        v-model="keyword">
                    </el-input>
                </div>

                <div class="fl">
                    <ul>
                        <li v-for="(item,key) in userList" :key="key">
                            <span class="fl">{{key+1+'.'+item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                            <span class="fl pointer" @click="addMember(key)">添加</span>
                        </li>
                    </ul>
                </div>

                <div class="fl">
                    <ul>
                        <li class="clear">
                            <span class="fl">账号</span>
                            <span class="fl">用户名</span>
                            <span class="fl">角色</span>
                        </li>
                        <li class="clear" v-for="(item,key) in preMember" :key="key">
                            <span class="fl">
                                <i @click="cancelMember(key)" class="el-icon-close pointer"></i>
                                {{item.number}}
                            </span>
                            <span class="fl">{{item.name}}</span>
                            <span class="fl">{{item.role_name}}</span>
                        </li>
                        
                    </ul>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelFinalmember">取消</el-button>
                <el-button @click="affirmFinalmember" type="primary">确定</el-button>
            </div>
        </el-dialog>

        同意弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'同意'"
            :visible.sync="consentView"
            width="550px">
            <div class="consent">
                <el-input
                    type="textarea"
                    placeholder="输入同意理由（非必填）"
                    maxlength="100"
                    show-word-limit
                    v-model.trim="consentReason">
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="consentView=false" type="primary" plain>取消</el-button>
                <el-button @click="consentExamine" type="primary">确认</el-button>
            </div>
        </el-dialog>

        拒绝弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'拒绝'"
            :visible.sync="rejectView"
            width="550px">
            <div class="reject">
                <el-input
                    type="textarea"
                    placeholder="输入拒绝理由（非必填）"
                    maxlength="100"
                    show-word-limit
                    v-model.trim="rejectReason">
                </el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rejectView=false" type="primary" plain>取消</el-button>
                <el-button @click="rejectExamine" type="primary">确认</el-button>
            </div>
        </el-dialog>

        转交历史弹窗
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'转交历史'"
            :visible.sync="deliverHistoryView"
            width="550px">
            <div class="deliverHistory">
                <ul>
                    <li class="clear" v-for="(histroyItem, histroyKey) in deliverHistory" :key="histroyKey">
                        <div class="fl left">
                            <i></i>
                        </div>
                        <div class="content">
                            <span class="name">{{histroyItem.deliver_name}}</span>
                            <span class="turn">转交给</span>
                            <span class="name">{{histroyItem.approver_name}}</span>
                            <span class="time">{{histroyItem.deliver_time}}</span>
                            <p v-if="histroyItem.comment">{{histroyItem.comment}}</p>
                            <i></i>
                        </div>
                    </li>
                    <li class="clear">
                        <div class="fl left">
                            <i></i>
                        </div>
                        <div class="content">
                            <span class="name">李春玲</span>
                            <span class="turn">转交给</span>
                            <span class="name">李飞飞</span>
                            <span class="time">2019-04-01 10:16:23</span>
                            <p>这是评语这是评语只展示一行超出显示....，鼠标移入显示完整</p>
                            <i></i>
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    export default {
        data(){
            return {
                data: '',   // 存放审批单列表、列表总数、页码、审批单总数的信息
                list: [],   // 审批单列表
                detailView: false,   // 控制详情弹窗显隐
                imgVisible: false,   // 控制预览图片弹窗显隐
                commentView: false,   // 控制评论弹窗显隐
                deliverView: false,   // 控制转交弹窗显隐
                chooseRoleView: false,   // 控制选择角色弹窗显隐
                consentView: false,   // 控制同意弹窗显隐
                rejectView: false,   // 控制拒绝弹窗显隐
                deliverHistoryView: false,   // 控制转交历史弹窗显隐
                deliverHistory: [],   // 存放转交历史信息
                previewImgURL: '',   // 存放预览图片地址
                examineID: null,   // 存放当前弹窗的审批单ID
                examineDetail: {},   // 存放当前弹窗的审批单详情
                commentContent: '',   // 存放评论的内容
                preDeliverReason: '',   // 存放转交理由的内容 (预览内容)
                deliverReason: '',   // 存放转交理由的内容 
                consentReason: '',   // 存放同意理由的内容
                rejectReason: '',   // 存放拒绝理由的内容
                params: {
                        user_id: this.$g.user_id,   // 当前登录人id
                        type: 1,   // 1：待我审批的；2：我已审批的；3：我发起的；4：抄送给我的；
                        page_index: 1,   // 当先显示的页码
                        page_size: 6   // 每页列表的数量
                    },

                // ================================================ 选择角色弹窗的参数 ========================================================
                    roleType: 0,   // 角色类型，0为全部
                    roleList: [],   // 存放角色列表
                    userList: [],   // 存放用户列表
                    keyword: '',   // 搜索关键字
                    preMember: [],   // 已选中的抄送人 (预选)
                    member: [],   // 已选中的抄送人(已确定的)
                // ================================================ 选择角色弹窗的参数 ========================================================
                
            }
        },
        created(){
            this.getList(1,'changePage');
        },
        filters:{
            filterName(val){
                let idx = val.lastIndexOf('/');
                return val.slice(idx+1);
            }
        },
        computed:{
            // 返回审批表单中最先遍历到的前三个单行输入框
            topThreeInput(){
                return function(arr){
                    let result = [];
                    
                    function getInput(arr){
                        for(let i=0;i<arr.length;i++){
                            if(arr[i].id == 1){
                                result.push(arr[i])
                                if(result.length >= 3){
                                    return
                                }
                            }else if(arr[i].id == 9){
                                getInput(arr[i].detail)
                            }
                        }
                    }
                    getInput(arr)

                    return result
                }
            },
            // 返回日期格式
            date(){
                return function(type,time){
                    let dateData = new Date(+time);

                    let year = dateData.getFullYear(),
                        month = dateData.getMonth() + 1,
                        day = dateData.getDate(),
                        hour = dateData.getHours(),
                        min = dateData.getMinutes();


                    // 补零操作
                    month = month > 9 ? month : '0' + month; 
                    day = day > 9 ? day : '0' + day; 
                    hour = hour > 9 ? hour : '0' + hour; 
                    min =  min > 9 ? min : '0' + min; 

                    let date = year + '.' + month + '.' + day;

                    return type == 1 ? date : date + ' ' + hour + ':' + min;
                }
            }
        },
        methods:{
            // 获取待我审批的审批单列表
            getList(keyword,changePage){
                let params = this.params;

                if(changePage != 'changePage'){
                    params.page_index = 1;
                    params.keyword = keyword;
                }

                let success = res => {
                    this.data = res.data;
                    this.list = res.data.data;

                    let unread;
                    if(this.list.length == 0){
                        unread = 0;
                    }else{
                        unread = this.list[0].all_count;
                    }

                    this.$emit('changeExamineByMeNum', unread)
                }
                this.$ajax({
                    url: "/api/examine/examine",
                    method: "get",
                    params: params,
                    func: { success: success }
                })
            },
            // 查看明细
            scanDetail(id){
                this.detailView = true;
                this.examineID = id;

                let success = res => {
                    this.examineDetail = res.data
                }
                this.$ajax({
                    url: "/api/examine/examine",
                    method: "get",
                    params: {id: id},
                    func: { success: success }
                })
            },
            handleCurrentChange(val) {
                this.params.page_index = val;
                this.getList(1,'changePage')
            },
            // 跳转到审批申请详情页
            turnDetail(){
                console.log("调到相应的审批单填写页")
                this.$router.push({path: '/examine/detail', query:{id:this.examineID}})
            },
            // 关闭审批单详情弹窗
            closeDetailView(){
                this.detailView = false;
                this.examineID = null;
                this.examineDetail = {};
                this.commentContent = '';
            },
            
            // 打印PDF
            printPDF(){
                console.log("打印PDF")
            },
            // 转交
            transpond(){
                this.deliverView = true;

                this.getUserList(0);
                this.roleType = 0;
                if(this.roleList.length<=0){
                    this.getRoleList();
                }
            },
            // 拒绝审批
            refuse(){
                console.log("拒绝")
                this.rejectReason = '';
                this.rejectView = true;
            },
            // 同意审批
            consent(){
                console.log("同意")
                this.consentReason = '';
                this.consentView = true;
            },

            // 弹出预览图片窗口
            previewImg(url){
                console.log(url)
                this.previewImgURL = url;
                this.imgVisible = true;
            },

            // ================================================ 选择角色弹窗的方法 ========================================================
                // 获取角色列表
                getRoleList(){
                    let param = {
                        status:1,   // 状态（1：正常；0：已删除）
                    }

                    let success = (res=>{
                        let data = res.data;
                        // console.log(data);
                        this.roleList = [{id:0,name:'全部'},...data];
                    })

                    let fail = ( data => {})

                    this.$ajax.get('/api/role/examineRoleGet',{params: param,func:{success:success,fail:fail}})
                },
                // 根据获取到的角色id更新用户列表
                updateUserList(val){
                    this.getUserList(val);
                },
                // 获取指定角色的成员列表
                getUserList(roleID,keyword){
                    let listParam = {
                        direction: 'ASC',   // 排序方式（固定传 ASC）
                        data_type: 0,   // 数据类型（0：无分页，2：有分页）
                        not_in_id: JSON.parse(sessionStorage.getItem('user_info_str')).id  // 需要排除的用户（用户id 可int，可array）此处要排除登录的人
                    }
                    
                    // 如果存在角色id
                    if(typeof roleID == 'number' && keyword===undefined){
                        listParam.role_id = roleID;   // 角色id（不传或传0可获取全部用户）
                    }else if(roleID===undefined && keyword){
                        listParam.n_n_e = keyword;
                    }

                    // let arr = [];
                    // // 如果存在已选的账号则排除已选的账号id
                    // if(arr.length){
                    //     listParam.not_in_id = arr.map(item=>itent.id);   // 需要排除的用户（用户id 可int，可array）
                    // }

                    let success = (res=>{
                        let data = res.data;
                        if(typeof roleID == 'number' && keyword===undefined){
                            this.userList = data;
                        }else if(roleID===undefined && keyword){
                            this.userList = data; 
                        }
                    })

                    let fail = ( data => {})
                    //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                    this.$ajax.get('/api/user/user',{params: listParam,func:{success:success,fail:fail}})
                },
                // 添加成员
                addMember(key){
                    if(this.preMember.length>=1){
                        this.$message.error('最多只能选择' + 1 + '个人')
                        return
                    }

                    let arr = this.preMember;
                    let val = this.userList[key];

                    this.preMember.push(this.userList[key]);
                },
                // 取消已选择的成员
                cancelMember(idx){
                    this.preMember.splice(idx,1);
                },
                // 确认已选好的指定人员
                affirmFinalmember(){
                    console.log("sure")
                    this.chooseRoleView=false
                    this.member = this.preMember.map(item=>item)
                },
                // 取消已选好的指定人员
                cancelFinalmember(){
                    console.log('cancel')
                    this.chooseRoleView=false
                    this.preMember = this.member.map(item=>item)
                },
                // 按照关键字搜索 （出入狂按钮聚焦时按回车触发）
                searchUser(keyword,event){
                    event.target.blur()
                    this.keyword = keyword.trim()
                    // 搜索关键字去掉前后空格，再判断是否存在值，如存在则发请求
                    if(this.keyword){
                        this.getUserList(undefined,this.keyword)
                    }
                },
                // 按照关键字搜索 （点击放大镜图标触发）
                searchUser2(keyword,event){
                    if(event.target.className=='el-input__icon el-icon-search'){
                        this.keyword = keyword.trim()
                        // 搜索关键字去掉前后空格，再判断是否存在值，如存在则发请求
                        if(this.keyword){
                            this.getUserList(undefined,this.keyword)
                        }
                    }
                },
            // ================================================ 选择角色弹窗的方法 ========================================================
                

            // 显示转交历史
            showDeliverHistory(history){
                console.log(deep_clone(history))
                this.deliverHistory = history;
                this.deliverHistoryView = true;
            },
            // 同意审批单的方法
            consentExamine(){
                let success = res => {
                    if(res.status == 'success'){
                        this.$message.success('操作成功！');
                        this.detailView = false;
                        this.consentView = false;

                        // 获取新的列表信息
                        if(this.data.page_max == this.params.page_index && this.data.data_sum % 6 == 1){
                            this.params.page_index--
                        }

                        this.getList(1,'changePage')
                    }
                }
                this.$ajax({
                    url: "/api/examine/approveExamine",
                    method: "PUT",
                    params: {
                            user_id: this.$g.user_id,   //当前登录人id
                            type: 1,   // 1：同意；2：拒绝；3：撤销
                            examine_id: this.examineID,   // 审批单id
                            comment: this.rejectReason   // 审批理由
                        },
                    func: { success: success }
                })
            },
            // 拒绝审批单的方法
            rejectExamine(){
                let success = res => {
                    if(res.status == 'success'){
                        this.$message.success('操作成功！');
                        this.detailView = false;
                        this.rejectView = false;

                        // 获取新的列表信息
                        if(this.data.page_max == this.params.page_index && this.data.data_sum % 6 == 1){
                            this.params.page_index--
                        }

                        this.getList(1,'changePage')
                    }
                }
                this.$ajax({
                    url: "/api/examine/approveExamine",
                    method: "PUT",
                    params: {
                            user_id: this.$g.user_id,   //当前登录人id
                            type: 2,   // 1：同意；2：拒绝；3：撤销
                            examine_id: this.examineID,   // 审批单id
                            comment: this.rejectReason   // 审批理由
                        },
                    func: { success: success }
                })
            },
            publishComment(){
                if(!this.commentContent){
                    this.$message.error('评语不能为空');
                    return
                }

                let success = res => {
                    if(res.status == 'success'){
                        this.commentView = false;
                        this.scanDetail(this.examineID);
                    }
                }
                this.$ajax({
                    url: "/api/examine/approveComment",
                    method: "post",
                    params: {
                            examine_id: this.examineID,   // 审批单id
                            user_id: this.$g.user_id,   //当前登录人id
                            comment: this.commentContent   // 评论理由
                        },
                    func: { success: success }
                })
            },

            // 转交弹窗取消按钮触发的方法
            cancelDeliver(){
                console.log("取消转交");
                this.deliverView = false;
                this.deliverReason = '';
                this.preMember = [];
                this.member = [];
            },
            // 转交弹窗确认按钮触发的方法
            sureDeliver(){
                console.log("确认转交");
                if(this.member.length==0){
                    this.$message.error("请选择转交人")
                    return
                }
                console.log(deep_clone(this.member))

                let success = res => {
                    if(res.status == 'success'){
                        this.$message.success("操作成功！");
                        this.deliverView = false;
                        this.detailView = false;
                        this.member = [];
                        this.comment = '';
                        this.getList();
                    }
                }
                this.$ajax({
                    url: "/api/examine/approveDelive",
                    method: "post",
                    params: {
                            deliver_id: this.$g.user_id,   // 当前审批人id（当前登录者）
                            examine_id: this.examineID,   // 审批单id
                            approver_id: this.member[0].id,   // 新审批人id
                            comment: this.deliverReason   // 转交理由
                        },
                    func: { success: success }
                })
            }
        }
    }
</script>

<style type="text/css" lang="scss">
     #examine{
        .index-container{

            .examine-by-me{
                
                // 列表
                >ul{
                    overflow: hidden;
                    width: 100%;
                    min-width:1200px;
                    min-height: 590px;

                    >li{
                        float: left;
                        box-sizing: border-box;
                        margin-bottom:15px;
                        margin-right:15px;
                        padding:35px 25px 0;
                        width: 390px;
                        height: 280px;
                        background: #fff;
                        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                        border-radius: 4px;
                        &:nth-child(3n){
                            margin-right:0;
                        }

                        .title{
                            height: 50px;
                            .avatar{
                                width: 50px;
                                height: 50px;
                                border-radius: 50%;
                                overflow: hidden;
                            }
                            .awaitIcon{
                                position: relative;
                                top: -22px;
                                right: -6px;
                            }
                            >p{
                                overflow:hidden;
                                padding: 16px 0 0 20px;
                                font-size: 14px;
                                color: #000000;
                                line-height: 20px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
            
                        >ul{
                            margin-top: 38px;
                            height: 120px;
                            >li{
                                margin-bottom: 14px;
                                font-size: 14px;
                                color: #333333;
                                line-height: 20px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                &:last-child{
                                    overflow: hidden;
                                }
                            }
                        }

                        .time{
                            font-size: 12px;
                            color: #666666;
                            letter-spacing: 0;
                            >p{
                                width: 50%;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                            } 
                        }
                    }
                }

                .el-pagination{
                }

                // 弹窗样式
                .el-dialog__wrapper{

                    // 预览图片
                    .previewImage{
                        position: relative;
                        height: 80vh;

                        >img{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }
                    
                    // 审批单详情弹窗
                    .examineDetil{
                        height: 800px;
                        overflow-x: hidden;

                        >div{
                            padding: 20px 30px 20px 43px;
                            border-bottom: 1px solid #EFEFEF;
                            &:last-child{
                                border: 0;
                            }

                            &.title{
                                position: relative;
                                height: 60px;
                                
                                .avatar{
                                    width: 60px;
                                    height: 60px;
                                    border-radius: 50%;
                                    overflow: hidden;
                                }

                                >div:first-of-type{
                                    margin-left: 25px;
                                    height: 100%;    

                                    >p{
                                        height: 50%;
                                        line-height: 30px;

                                        &:first-child{
                                            font-size: 16px;
                                            color: #000000;
                                        }
                
                                        &:last-child{
                                            font-size: 14px;
                                            color: #999999;

                                            >span{
                                                font-size: 14px;
                                                color: #d79e36;
                                            }

                                        }

                                    }

                                }

                                >div:last-of-type{
                                    padding-top: 10px;

                                    >img{
                                        margin-left: 30px;
                                    }

                                }

                                .statusIcon{
                                    position: absolute;
                                    top: 79px;
                                    right: 65px;
                                    width: 93px;
                                    height: 71px ;
                                }

                            }

                            // 审批申请单详情
                            &.contentDetail{

                                >ul{
                                    // max-height: 460px;
                                    overflow-x: hidden;

                                    >li{
                                        margin-top: 12px;
                                        font-size: 16px;
                                        line-height: 28px;

                                        // 公共板块
                                        >span{

                                            &:first-child{
                                                width: 165px;
                                                color: #666666;
                                            }

                                            &:last-child{
                                                margin-left: 16px;
                                                width: 530px;
                                                max-height: 140px;
                                                overflow-x: hidden;
                                                color: #000000;

                                            }

                                        }

                                        // 图片列表
                                        >ul{
                                            width: 500px;

                                            li{
                                                position: relative;
                                                margin: 15px 15px 0 0;
                                                border-radius: 6px;
                                                overflow: hidden;
                                                &:nth-child(-n+3){
                                                    margin-top: 0;
                                                }

                                                &:nth-child(3n){
                                                    margin-right: 0;
                                                }
                                                
                                                >img{
                                                    width: 150px;
                                                    height: 150px;
                                                    border: 1px solid #ddd;
                                                    border-radius: 6px;
                                                    object-fit: cover;
                                                }

                                                .cover{
                                                    display: none;
                                                    position: absolute;
                                                    top: 0;
                                                    bottom: 0;
                                                    left: 0;
                                                    right: 0;
                                                    background: rgba(0,0,0,0.5);

                                                    .el-icon-zoom-in{
                                                        position: absolute;
                                                        top: 50%;
                                                        left: 50%;
                                                        transform: translate(-50%, -50%);
                                                        font-size: 20px;
                                                        color: white;
                                                    }
                                                }

                                                &:hover .cover{
                                                    display: block;
                                                }
                                            }
                                        }

                                        // 说明文字跳转链接
                                        .url{
                                            color: #666666;

                                            &:hover {
                                                color: blue;
                                            }
                                        }

                                        // 下载附件
                                        .download{
                                            &:hover {
                                                color: blue;
                                            }
                                        }

                                        // 明细
                                        .detail{
                                            .topLine{
                                                display: block;
                                                border-bottom: 2px dashed #ddd;
                                            }
                                            .bottomLine{
                                                display: block;
                                                padding-top: 15px;
                                                border-bottom: 2px dashed #ddd;
                                            }
    
                                            .detailTitle{
                                                display: block;
                                                padding: 10px 0;
                                            }

                                            >ul{
                                                // max-height: 460px;
                                                overflow-x: hidden;

                                                >li{
                                                    // margin-top: 12px;
                                                    font-size: 16px;
                                                    line-height: 28px;

                                                    // 公共板块
                                                    >span{

                                                        &:first-child{
                                                            margin-left: 30px;
                                                            width: 165px;
                                                            color: #666666;
                                                        }

                                                        &:last-child{
                                                            margin-left: 16px;
                                                            width: 500px;
                                                            max-height: 140px;
                                                            overflow-x: hidden;
                                                            color: #000000;

                                                        }

                                                    }

                                                    // 图片列表
                                                    >ul{
                                                        width: 500px;

                                                        li{
                                                            position: relative;
                                                            margin: 15px 15px 0 0;
                                                            border-radius: 6px;
                                                            overflow: hidden;
                                                            &:nth-child(-n+3){
                                                                margin-top: 0;
                                                            }

                                                            &:nth-child(3n){
                                                                margin-right: 0;
                                                            }
                                                            
                                                            >img{
                                                                width: 150px;
                                                                height: 150px;
                                                                border: 1px solid #ddd;
                                                                border-radius: 6px;
                                                                object-fit: cover;
                                                            }

                                                            .cover{
                                                                display: none;
                                                                position: absolute;
                                                                top: 0;
                                                                bottom: 0;
                                                                left: 0;
                                                                right: 0;
                                                                background: rgba(0,0,0,0.5);

                                                                .el-icon-zoom-in{
                                                                    position: absolute;
                                                                    top: 50%;
                                                                    left: 50%;
                                                                    transform: translate(-50%, -50%);
                                                                    font-size: 20px;
                                                                    color: white;
                                                                }
                                                            }

                                                            &:hover .cover{
                                                                display: block;
                                                            }
                                                        }
                                                    }

                                                    // 说明文字跳转链接
                                                    .url{
                                                        margin-left: 30px;
                                                        color: #666666;

                                                        &:hover {
                                                            color: blue;
                                                        }
                                                    }

                                                    // 下载附件
                                                    .download{
                                                        &:hover {
                                                            color: blue;
                                                        }
                                                    }

                                                    &:first-child{
                                                        margin: 0;
                                                    }

                                                }

                                            }

                                        }
                                        
                                        &:first-child{
                                            margin: 0;
                                        }

                                    }

                                }

                            }

                            // 审批流程
                            &.flow{

                                >ul{

                                    >li{
                                        letter-spacing: 0.11px;
                                        font-size: 14px;

                                        .left{

                                            >img{
                                                width: 40px;
                                                height: 40px;
                                                border-radius: 50%;
                                                overflow: hidden;
                                            }

                                            >i{
                                                margin: 5px 0 5px 19px;
                                                display: block;
                                                width: 2px;
                                                height: 30px;
                                                background: #DDDDDD;
                                            }

                                        }

                                        .content{
                                            overflow: hidden;

                                            >span{
                                                height:40px;
                                                line-height: 40px;
                                                overflow: hidden;
                                                text-align: center;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;

                                                &.name{
                                                    margin-left: 20px;
                                                    width: 80px;
                                                    text-align: left;
                                                    color: #666666;
                                                }
                                                
                                                // 黑色（发起申请）
                                                &.sponsor{
                                                    margin: 0 5px;
                                                    width: 80px;
                                                    font-size: 14px;
                                                    text-align: center;
                                                    color: #000000;
                                                }
                                                
                                                // 棕色（审批中）
                                                &.underway{
                                                    margin: 0 5px;
                                                    width: 80px;
                                                    color: #CC8401;
                                                    text-align: center;
                                                }
                                    
                                                // 蓝绿色（已通过）
                                                &.resolve{
                                                    margin: 0 5px;
                                                    width: 80px;
                                                    color: #33BBBB;
                                                    text-align: center;
                                                }
                                                
                                                // 红色（拒绝）
                                                &.reject{
                                                    margin: 0 5px;
                                                    width: 80px;
                                                    color: #CD5B72;
                                                    text-align: center;
                                                }

                                                // 灰色（已撤销）
                                                &.revocation{
                                                    margin: 0 5px;
                                                    width: 80px;
                                                    color: #eee;
                                                    text-align: center;
                                                }

                                                &.history{
                                                    color: #348EFC;
                                                }

                                                &.time{
                                                    margin-left: 10px;
                                                    font-size: 12px;
                                                    color: #999999;
                                                    overflow: hidden;
                                                }

                                            }

                                            >p{
                                                margin-left: 20px;
                                                line-height: 20px;
                                                font-size: 14px;
                                                color: #333333;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                            }

                                        }

                                        &:last-child{
                                            .left{
                                                >i{
                                                    display: none;
                                                }
                                            }
                                        }

                                    }

                                }

                            }

                            // 抄送人
                            &.copyTo{
                                >dl{
                                    width: 100%;
                                    // max-height: 136px;
                                    white-space: nowrap;
                                    overflow-x: hidden;

                                    >dt{
                                        font-size: 12px;
                                        line-height: 16px;
                                        color: #333333;
                                    }

                                    >dd{
                                        margin-top: 20px;
                                        margin-right: 10px;
                                        display: inline-block;
                                        width: 60px;
                                        max-height: 90px;
                                        min-height: 66px;
                                        text-align: center;

                                        >img{
                                            display: block;
                                            margin: 0 auto;
                                            margin-bottom: 6px;
                                            width: 40px;
                                            height: 40px;
                                            border-radius: 50%;
                                            overflow: hidden;
                                        }
                                            
                                        >p{
                                            max-height: 32px;
                                            line-height: 16px;
                                            white-space: normal;
                                            font-size: 12px;
                                            color: #666666;
                                            letter-spacing: 0.1px;
                                            text-align: center;
                                            text-overflow: -o-ellipsis-lastline;
                                            -webkit-box-orient: vertical;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            display: -webkit-box;
                                            -webkit-line-clamp: 2;
                                            line-clamp: 2;
                                        }

                                        &.noPeople{
                                            font-size: 12px;
                                            line-height: 16px;
                                            text-align: left;
                                            color: #999999;
                                        }

                                    }

                                }

                            }

                            // 操作栏
                            &.control{
                                padding-top: 10px;
                                padding-bottom: 10px;
                                height: auto;

                                >.center{
                                    margin: 0 auto;
                                    width: 32px;

                                    .comment{
                                        font-size: 12px;
                                        color: #348EFC;
                                        border: 0 none;
                                        background: #fff;
                                        >img{
                                            margin-bottom: 6px;
                                            width: 100%;
                                        }

                                    }

                                }

                                .btn{

                                    >button{
                                        display: inline-block;

                                        &.comment{
                                            margin-right: 30px;
                                            width: 32px;
                                            font-size: 12px;
                                            color: #348EFC;
                                            background: #fff;
                                            border: 0 none;

                                            >img{
                                                margin-bottom: 6px;
                                                width: 100%;
                                            }

                                        }

                                        &.transpond{
                                            width: 34px;
                                            font-size: 12px;
                                            color: #348EFC;
                                            background: #fff;
                                            border: 0 none;

                                            >img{
                                                margin-bottom: 6px;
                                                width: 100%;
                                            }

                                        }
                                        
                                    }

                                    >div{
                                        margin: 0 auto;
                                        padding-top: 13px;
                                        width: 146px;

                                        .el-button--danger{
                                            left: 327px;
                                        }

                                        .el-button--primary{
                                            right: 327px;
                                        }

                                        .el-button{
                                            padding: 0;
                                            width: 68px;
                                            height: 30px;
                                            font-size: 14px;
                                            border: 0 none;

                                        }

                                    }

                                }

                            }

                        }
                        
                    }

                    // 评论弹窗
                    .inputComment{
                        padding: 25px 30px 0;

                        .el-textarea__inner{
                            width: 490px;
                            height: 180px;
                            resize: none;
                        }
                    }

                    // 转交弹窗
                    .deliver{
                        padding: 25px 30px 0;
                        font-size: 14px;
                        line-height: 20px;
                        color: #000000;
                        >div{
                            >span{
                                margin-right: 7px;
                                width: 110px;
                            }
                            &:first-child{
                                >button{
                                    color: #348EFC;
                                    border: 0 none;
                                    background: #fff;
                                }
                            }

                            &:last-child{
                                margin-top: 20px;

                                .el-textarea{
                                    width: 373px;
                                    >textarea{
                                        height: 200px;
                                        resize: none;
                                    }
                                }
                            }

                        }

                    }

                    // 选择角色弹窗
                    .addMember{
                        padding: 20px 40px 0;
                        font-size:16px;
                        >div{
                            &:first-child{
                                width:260px;
                                .el-input{
                                    input{
                                        font-size:14px;
                                    }
                                    input::-webkit-input-placeholder{
                                        font-size:14px;
                                    }
                                }
                            }
                            &:nth-child(2){
                                margin-left:20px;
                                width:300px;
                                .el-input__icon.el-icon-search{
                                    font-size:18px;
                                    cursor:pointer;
                                }
                                .el-input{
                                    input{
                                        font-size:14px;
                                    }
                                    input::-webkit-input-placeholder{
                                        font-size:14px;
                                    }
                                }
                            }
                            &:nth-child(3){
                                margin-top:20px;
                                padding:4px;
                                box-sizing:border-box;
                                width:260px;
                                height:288px;
                                border:1px solid #DDDDDD;
                                >ul{
                                    height:100%;
                                    overflow-X:hidden;
                                    li{
                                        height:36px;
                                        span{
                                            box-sizing:border-box;
                                            margin:8px 0;
                                            padding-left:8px;
                                            width:40%;
                                            height:20px;
                                            font-size: 14px;
                                            line-height:20px;
                                            color: #000000;
                                            letter-spacing: 0.11px;
                                            overflow:hidden;
                                            text-overflow:ellipsis;
                                            white-space:nowrap;
                                            &:last-child{
                                                width:17%;
                                                color: #348EFC;
                                            }
                                        }
                                    }
                                }
                            }
                            &:nth-child(4){
                                position:relative;
                                margin-top:20px;
                                margin-left:20px;
                                padding-top:36px;
                                box-sizing:border-box;
                                width:440px;
                                height:288px;
                                border:1px solid #DDDDDD;
                                overflow:hidden;
                                >ul{
                                    overflow-X:hidden;
                                    height:100%;
                                    li{
                                        &:first-child{
                                            position:absolute;
                                            top:0;
                                            left:0;
                                            right:0;
                                            padding-right:15px;
                                            background: #EFEFEF;
                                            span:first-child{
                                                box-sizing:border-box;
                                                padding-left:27px;
                                            }
                                        }
                                        width:425px;
                                        height:36px;
                                        font-size: 14px;
                                        color: #000000;
                                        letter-spacing: 0.11px;
                                        span{
                                            box-sizing:border-box;
                                            margin:8px 0;
                                            padding-left:8px;
                                            width:38%;
                                            height:20px;
                                            font-size: 14px;
                                            line-height:20px;
                                            color: #000000;
                                            letter-spacing: 0.11px;
                                            overflow:hidden;
                                            text-overflow:ellipsis;
                                            white-space:nowrap;
                                            &:first-child{
                                                vertical-align:middle;
                                                .el-icon-close.pointer{
                                                    vertical-align:middle;
                                                    font-size:20px;
                                                    color: #999999;
                                                    &:hover{
                                                        color:#5cb6ff;
                                                    }
                                                }

                                            }
                                            &:nth-child(2){

                                            }
                                            &:last-child{
                                                width:23%;
                                                padding-left:14px;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // 拒绝、同意弹窗
                    .consent,.reject{
                        padding: 25px 30px 0;

                        .el-textarea{
                            >textarea{
                                height: 200px;
                                resize: none;
                            }

                        }

                    }

                    // 转交历史弹窗
                    .deliverHistory{
                        padding: 50px;
                        min-height: 204px;
                        max-height: 500px;
                        overflow-x: hidden;

                        >ul{
                            >li{
                                letter-spacing: 0.11px;
                                font-size: 14px;

                                .left{
                                    width: 36px;

                                    >i{
                                        position: relative;
                                        top: 14px;
                                        left: 12px;
                                        display: block;
                                        width: 12px;
                                        height: 12px;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        background: #76a8e6;
                                    }

                                }

                                .content{
                                    position: relative;
                                    margin-left: 36px;
                                    width: 400px;

                                    >span{
                                        height:40px;
                                        line-height: 40px;
                                        color: #666666;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        &:first-child{
                                            margin-left: 20px;
                                        }


                                        &.turn{
                                            margin: 0 14px;
                                            color: #999999;
                                        }

                                        &.time{
                                            margin-left: 72px;
                                            font-size: 12px;
                                            color: #999999;
                                            overflow: hidden;
                                        }

                                    }

                                    >p{
                                        margin-left: 20px;
                                        min-height: 68px;
                                        line-height: 20px;
                                        font-size: 14px;
                                        color: #000000;
                                        overflow: hidden;
                                        // white-space: nowrap;
                                        // text-overflow: ellipsis;

                                    }

                                    >i{
                                        position: absolute;
                                        top: 26px;
                                        left: -19px;
                                        width: 2px;
                                        height: 100%;
                                        background: #DDDDDD;
                                    }

                                }

                                &:last-child{
                                    .content{
                                        >i{
                                            display: none;
                                        }

                                    }

                                }

                            }

                        }

                    }

                }

            }

        }

    }
</style> -->